<template>
  <div class="scoreDetail">
    <div class="head">
      <a href="javascript:;" @click="goBack" style="font-size:14px">
        <i class="el-icon-arrow-left"></i>返回
      </a>
    </div>
    <div class="table">
      <ul>
        <li v-for="(exam,index) in tableData" class="exam">
          <div v-html="exam.itemOrder + '.' + exam.title" class="title noBr"></div>
          <div class="cl"></div>
          <div class="answer">
            <div class="flex">
              <div
                v-for="item in exam.items"
                v-html="item.prefix + '.' + item.content"
                class="flex_1 noBr"
              ></div>
            </div>
          </div>
          <div class="other">
            提交答案:
            <span class="blue">{{exam.studentAnswer}}</span> 正确答案 :
            <span class="blue">{{exam.correct}}</span> 得分:
            <span class="red">{{exam.studentScore}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="pager">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="allData.length"
        :page-size="15"
        @current-change="changePage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { examStudentEamDetail } from "@/api/exam";
export default {
  name: "ManageTraineeScoreDetail",
  data() {
    return {
      tableData: [],
      query: {},
      allData: [],
      currentPage: 1
    };
  },
  methods: {
    goBack() {
      this.$router.goBack();
    },
    changePage(currentPage) {
      this.currentPage = currentPage;
      this.tableData = this.allData.slice(
        currentPage - 1 * 15,
        currentPage * 15
      );
    }
  },
  created() {
    this.query = this.$route.query;
    this.stuId = this.$route.params.id;
    examStudentEamDetail({
      stuId: this.stuId,
      examPaperId: this.query.examPaperId
    }).then(res => {
      if (res.code == 1) {
        this.allData = res.response;
        this.changePage(1);
      }
    });
  }
};
</script>
<style lang="scss" scoped>
.scoreDetail {
  height: 100%;
  width: 100%;
  padding: 0 45px;
}
.head {
  line-height: 30px;
  font-size: 18px;
  margin-bottom: 10px;
}
.pager {
  height: 32px;
  box-sizing: content-box;
  padding: 10px 0;
  text-align: center;
}
.table {
  height: calc(100% - 92px);
  overflow: auto;
  .exam {
    padding: 10px 0;
    border-bottom: 1px dashed #bbbbbb;
  }
  .title {
    font-size: 14px;
    line-height: 20px;
  }
  .answer {
    font-size: 14px;
    line-height: 20px;
    padding: 10px 0;
  }
  .other {
    font-size: 14px;
    line-height: 20px;
    padding: 5px;
    background-color: #f9f9f9;
  }
}
.blue {
  color: #007cdc;
  padding-right: 20px;
}
.red {
  padding-right: 20px;
  color: red;
}
.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex_1 {
  width: 50%;
}
</style>